<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高一阶梯式奖励计算器</title>
    <style>
      :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --accent-color: #4cc9f0;
        --light-color: #f8f9fa;
        --dark-color: #212529;
        --success-color: #4caf50;
        --warning-color: #ff9800;
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      /* 基本样式 */
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        line-height: 1.5;
        background-color: #f5f7fa;
        color: var(--dark-color);
        margin: 0;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }

      .container {
        width: 100%;
        max-width: 1100px;
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 24px;
        display: flex;
        flex-direction: column;
      }

      h1 {
        text-align: center;
        color: var(--primary-color);
        margin: 0 0 15px 0;
        font-size: 24px;
      }

      .description {
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        background-color: rgba(76, 201, 240, 0.1);
        border-radius: 8px;
        font-size: 14px;
      }

      .rules p {
        margin: 4px 0;
      }

      /* 结果部分 */
      .results {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 8px;
        background-color: rgba(76, 201, 240, 0.1);
        order: -1; /* 将结果区域提到表单上方 */
      }

      .results h2 {
        color: var(--primary-color);
        text-align: center;
        margin: 0 0 15px 0;
        font-size: 20px;
      }

      .total-reward {
        font-size: 22px;
        text-align: center;
        color: var(--success-color);
        font-weight: bold;
        margin-bottom: 15px;
        padding: 10px;
        background-color: rgba(76, 175, 80, 0.1);
        border-radius: 6px;
      }

      .subject-rewards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        font-size: 13px;
      }

      .subject-reward {
        padding: 10px;
        background-color: white;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }

      .subject-name {
        font-weight: bold;
        margin-bottom: 5px;
        color: var(--secondary-color);
        font-size: 15px;
      }

      /* 表单部分 */
      .form-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
      }

      .subject-group {
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .group-header {
        font-weight: bold;
        margin-bottom: 12px;
        font-size: 16px;
        border-bottom: 2px solid var(--accent-color);
        padding-bottom: 8px;
      }

      .chinese-math-english {
        background-color: rgba(67, 97, 238, 0.05);
      }
      .physics-chemistry-biology {
        background-color: rgba(63, 55, 201, 0.05);
      }
      .politics-history-geography {
        background-color: rgba(76, 201, 240, 0.05);
      }

      .form-row {
        margin-bottom: 10px;
      }

      label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
      }

      input[type="number"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      input[type="number"]:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.25);
      }

      button {
        display: block;
        width: 100%;
        padding: 12px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: 20px;
        box-shadow: var(--shadow);
      }

      button:hover {
        background-color: var(--secondary-color);
      }

      /* ------------------------------------------- */
      /* --- 响应式布局：针对小屏幕设备（如手机） --- */
      /* ------------------------------------------- */
      @media (max-width: 768px) {
        body {
          /* 在小屏幕上，让内容从顶部开始，而不是垂直居中 */
          padding: 10px;
          align-items: flex-start;
        }

        .container {
          padding: 15px;
          /* 允许容器内部内容超出后可以滚动 */
          max-height: calc(100vh - 20px);
          overflow-y: auto;
        }

        h1 {
          font-size: 20px;
          margin-bottom: 10px;
        }

        .description {
          font-size: 13px;
        }

        /* 将表单科目组变为单列，垂直排列 */
        .form-container {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        /* 将结果展示变为两列，更适合手机屏幕 */
        .subject-rewards {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
        }

        .total-reward {
          font-size: 20px;
        }

        button {
          padding: 10px;
          font-size: 16px;
          margin-top: 15px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>高一阶梯式奖励计算器</h1>

      <div class="description">
        <div class="rules">
          <p>语数外 (120分): 72-101.9分 1元/分, ≥102分 2元/分</p>
          <p>物化生 (100分): 60-84.9分 1元/分, ≥85分 2元/分</p>
          <p>政史地 (100分): 60-84.9分 0.5元/分, ≥85分 1元/分</p>
        </div>
      </div>

      <div class="results" id="results">
        <h2>奖励计算结果</h2>
        <div class="total-reward" id="totalReward">总奖励：0.00元</div>
        <div class="subject-rewards" id="subjectRewards">
          <!-- 结果将在这里动态显示 -->
        </div>
      </div>

      <form id="gradeForm" onsubmit="calculateRewards(event)">
        <div class="form-container">
          <div class="subject-group chinese-math-english">
            <div class="group-header">语数外 (满分120)</div>
            <div class="form-row">
              <label for="chinese">语文分数：</label
              ><input
                type="number"
                id="chinese"
                min="0"
                max="120"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="math">数学分数：</label
              ><input
                type="number"
                id="math"
                min="0"
                max="120"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="english">英语分数：</label
              ><input
                type="number"
                id="english"
                min="0"
                max="120"
                value="0"
                required
              />
            </div>
          </div>

          <div class="subject-group physics-chemistry-biology">
            <div class="group-header">物化生 (满分100)</div>
            <div class="form-row">
              <label for="physics">物理分数：</label
              ><input
                type="number"
                id="physics"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="chemistry">化学分数：</label
              ><input
                type="number"
                id="chemistry"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="biology">生物分数：</label
              ><input
                type="number"
                id="biology"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
          </div>

          <div class="subject-group politics-history-geography">
            <div class="group-header">政史地 (满分100)</div>
            <div class="form-row">
              <label for="politics">政治分数：</label
              ><input
                type="number"
                id="politics"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="history">历史分数：</label
              ><input
                type="number"
                id="history"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
            <div class="form-row">
              <label for="geography">地理分数：</label
              ><input
                type="number"
                id="geography"
                min="0"
                max="100"
                value="0"
                required
              />
            </div>
          </div>
        </div>

        <button type="submit">计算奖励</button>
      </form>
    </div>

    <script>
      // 定义科目配置
      const subjectsConfig = {
        chinese: { name: "语文", type: "typeA" },
        math: { name: "数学", type: "typeA" },
        english: { name: "英语", type: "typeA" },
        physics: { name: "物理", type: "typeB" },
        chemistry: { name: "化学", type: "typeB" },
        biology: { name: "生物", type: "typeB" },
        politics: { name: "政治", type: "typeC" },
        history: { name: "历史", type: "typeC" },
        geography: { name: "地理", type: "typeC" },
      };

      // 计算函数映射
      const calculationRules = {
        typeA: (score) => {
          // 语数外
          if (score < 72) return { reward: 0, desc: `低于72分` };
          if (score < 102) {
            const r = (score - 72) * 1;
            return { reward: r, desc: `(${score}-72)×1 = ${r.toFixed(2)}元` };
          }
          const r = (102 - 72) * 1 + (score - 102) * 2;
          return {
            reward: r,
            desc: `30×1+(${score}-102)×2 = ${r.toFixed(2)}元`,
          };
        },
        typeB: (score) => {
          // 物化生
          if (score < 60) return { reward: 0, desc: `低于60分` };
          if (score < 85) {
            const r = (score - 60) * 1;
            return { reward: r, desc: `(${score}-60)×1 = ${r.toFixed(2)}元` };
          }
          const r = (85 - 60) * 1 + (score - 85) * 2;
          return {
            reward: r,
            desc: `25×1+(${score}-85)×2 = ${r.toFixed(2)}元`,
          };
        },
        typeC: (score) => {
          // 政史地
          if (score < 60) return { reward: 0, desc: `低于60分` };
          if (score < 85) {
            const r = (score - 60) * 0.5;
            return { reward: r, desc: `(${score}-60)×0.5 = ${r.toFixed(2)}元` };
          }
          const r = (85 - 60) * 0.5 + (score - 85) * 1;
          return {
            reward: r,
            desc: `25×0.5+(${score}-85)×1 = ${r.toFixed(2)}元`,
          };
        },
      };

      function calculateRewards(event) {
        event.preventDefault();
        let totalReward = 0;
        const subjectRewardsContainer =
          document.getElementById("subjectRewards");
        subjectRewardsContainer.innerHTML = "";

        for (const id in subjectsConfig) {
          const score = parseFloat(document.getElementById(id).value) || 0;
          const config = subjectsConfig[id];
          const result = calculationRules[config.type](score);

          totalReward += result.reward;

          // 创建并显示单科结果
          const subjectElement = document.createElement("div");
          subjectElement.className = "subject-reward";
          subjectElement.innerHTML = `
<div class="subject-name">${config.name} (${score}分)</div>
<div>${result.desc}</div>
`;
          subjectRewardsContainer.appendChild(subjectElement);
        }

        // 显示总奖励
        document.getElementById(
          "totalReward"
        ).textContent = `总奖励：${totalReward.toFixed(2)}元`;
      }

      // 页面加载时自动计算一次
      window.onload = function () {
        // 确保所有输入框在加载/刷新时都重置为0
        document
          .querySelectorAll('input[type="number"]')
          .forEach((input) => (input.value = "0"));
        // 初始化显示
        calculateRewards(new Event("submit"));
      };
    </script>
  </body>
</html>
